{{ define "js"}}
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/r-2.2.3/datatables.min.js"></script>
<script>
  var validatorsDataTable;
  var stateFilterDropDownHtml = `<div><label>
  <div class="dropdown" style="display:inline-block;">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>All {{.TotalCount}}</span></button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <h6 class="dropdown-header"><span>Filter state</span> <span><span class="text-success">online</span> | <span class="text-danger">offline</span></span></h6>
      <hr style="margin:0.5rem 0">
      <a class="dropdown-item" href="#all" data-filter-validators="all"><span>All</span> <span>{{.TotalCount}}</span></a>
      <a class="dropdown-item" href="#pending" data-filter-validators="pending"><span>Pending</span> <span>{{.PendingCount}}</span></a>
      <a class="dropdown-item" href="#active" data-filter-validators="active"><span>Active</span><span> <span class="text-success">{{.ActiveOnlineCount}}</span> | <span class="text-danger">{{.ActiveOfflineCount}}</span></span></a>
      <a class="dropdown-item" href="#slashing" data-filter-validators="slashing"><span>Slashing</span><span> <span class="text-success">{{.SlashingOnlineCount}}</span> | <span class="text-danger">{{.SlashingOfflineCount}}</span></span></a>
      <a class="dropdown-item" href="#exiting" data-filter-validators="exiting"><span>Exiting</span><span> <span class="text-success">{{.ExitingOnlineCount}}</span> | <span class="text-danger">{{.ExitingOfflineCount}}</span></span></a>
      <a class="dropdown-item" href="#exited" data-filter-validators="exited"><span>Exited</span> <span>{{.ExitedCount}}</span></a>
    </div>
  </div>
</label></div>`;
  function adaptTableToState(state) {
    $('.filter-by-status a.dropdown-item').removeClass('active');
    $(`.filter-by-status a[data-filter-validators=${state}]`).addClass('active');
    $('.filter-by-status .btn:first-child').html($(`.filter-by-status a[data-filter-validators=${state}]`).html());
    // 0pubkey, 1idx, 2bal, 3state, 4active, 5exit, 6withdraw, 7lastattest
    if (state === "all") {
      validatorsDataTable.column(3).visible(true);
      validatorsDataTable.column(4).visible(true);
      validatorsDataTable.column(5).visible(true);
      validatorsDataTable.column(6).visible(true);
      validatorsDataTable.column(7).visible(true);
      validatorsDataTable.column(8).visible(true)
    } else if (state === "pending") {
      validatorsDataTable.column(3).visible(true);
      validatorsDataTable.column(4).visible(true);
      validatorsDataTable.column(5).visible(false);
      validatorsDataTable.column(6).visible(false);
      validatorsDataTable.column(7).visible(false);
      validatorsDataTable.column(8).visible(false)
    } else if (state === "active" || state === "slashing" || state === "exiting") {
      validatorsDataTable.column(3).visible(true);
      validatorsDataTable.column(4).visible(true);
      validatorsDataTable.column(5).visible(false);
      validatorsDataTable.column(6).visible(false);
      validatorsDataTable.column(7).visible(true);
      validatorsDataTable.column(8).visible(true)
    } else if (state === "exited") {
      validatorsDataTable.column(3).visible(false);
      validatorsDataTable.column(4).visible(true);
      validatorsDataTable.column(5).visible(true);
      validatorsDataTable.column(6).visible(true);
      validatorsDataTable.column(7).visible(false);
      validatorsDataTable.column(8).visible(true)
    }
  }
  $(document).ready(function() {
    var state = 'all';
    var possibleStates = {
      all: true,
      pending: true,
      active: true,
      slashing: true,
      exiting: true,
      exited: true,
    };
    if (window.location.hash) {
      var hashState = window.location.hash.substring(1);
      if (possibleStates[hashState]) state = hashState
    }

    validatorsDataTable = $('#validators').DataTable({
      pageLength: 25,
      processing: true,
      serverSide: true,
      ordering: true,
      searching: true,
      ajax: '/validators/data?filterByState='+state,
      pagingType: 'full',
      dom: "<'row'<'col-sm-12 col-md-6 filter-by-status'><'col-sm-12 col-md-6'f>>" + 
           "<'row'<'col-sm-12'tr>>" + 
           "<'row'<'col-sm-12 col-md-5'l><'col-sm-12 col-md-7'p>>",
      fnInitComplete: function() {
        $('.filter-by-status')
          .html(stateFilterDropDownHtml)
          .find('[data-filter-validators]')
          .click(function() {
            var f = $(this).data('filter-validators');
            validatorsDataTable.ajax.url(`/validators/data?filterByState=${f}`);
            validatorsDataTable.ajax.reload();
            adaptTableToState(f)
          });
        adaptTableToState(state)
      },
      preDrawCallback: function() {
        // this does not always work.. not sure how to solve the staying tooltip
        try {
          $('#validators').find('[data-toggle="tooltip"]').tooltip('dispose')
        } catch (e) {}
      },
      drawCallback: function() {
        $('#validators').find('[data-toggle="tooltip"]').tooltip();
        validatorsDataTable.columns.adjust().responsive.recalc()
      },
      columnDefs: [
        {
          targets: 0,
          data: '0',
          render: function(data, type, row, meta) {
            return '<a href="/validator/' + data + '">0x' + data.substr(0, 8) + '...</a>'
          }
        },
        {
          targets: 1,
          data: '1',
          render: function(data, type, row, meta) {
            return '<a href="/validator/' + data + '">' + data + '</a>'
          }
        },
        {
          targets: 2,
          data: '2',
          render: function(data, type, row, meta) {
            return `${data[0]} (${data[1]})`
          }
        },
        {
          targets: 3,
          data: '3',
          render: function(data, type, row, meta) {
            var d = data.split('_');
            var s = d[0].charAt(0).toUpperCase() + d[0].slice(1);
            if (d[1] === 'offline') 
              return `<span data-toggle="tooltip" data-placement="top" title="No attestation in the last 2 epochs">${s} <i class="fas fa-power-off fa-sm text-danger"></i></span>`;
            if (d[1] === 'online')
              return `<span>${s} <i class="fas fa-power-off fa-sm text-success"></i></span>`;
            return `<span>${s}</span>`
          }
        },
        {
          targets: 4,
          data: '4',
          render: function(data, type, row, meta) {
            if (data === null) 
              return '-';
            return `<span data-toggle="tooltip" data-placement="top" title="${moment.unix(data[1]).format()}">${moment.unix(data[1]).fromNow()} (<a href="/epoch/${data[0]}">Epoch ${data[0]}</a>)</span>`
          }
        },
        {
          targets: 5,
          data: '5',
          render: function(data, type, row, meta) {
            if (data === null) 
              return '-';
            return `<span data-toggle="tooltip" data-placement="top" title="${moment.unix(data[1]).format()}">${moment.unix(data[1]).fromNow()} (<a href="/epoch/${data[0]}">Epoch ${data[0]}</a>)</span>`
          }
        },
        {
          targets: 6,
          data: '6',
          render: function(data, type, row, meta) {
            if (data === null) 
              return '-';
            return `<span data-toggle="tooltip" data-placement="top" title="${moment.unix(data[1]).format()}">${moment.unix(data[1]).fromNow()} (<a href="/epoch/${data[0]}">Epoch ${data[0]}</a>)</span>`
          }
        },
        {
          targets: 7,
          data: '7',
          render: function(data, type, row, meta) {
            if (data === null)
              return 'No Attestation found';
            return `<span data-toggle="tooltip" data-placement="top" title="${moment.unix(data[1]).format()}">${moment.unix(data[1]).fromNow()} (<a href="/block/${data[0]}">Block ${data[0]}</a>)</span>`
          }
        },
        {
          targets: 8,
          data: '8',
          render: function(data, type, row, meta) {
            return `<span data-toggle="tooltip" data-placement="top" title="${data[0]} executed / ${data[1]} missed"><span class="text-success">${data[0]}</span> / <span class="text-danger">${data[1]}</span></span>`
          }
        }
      ]
    })
  })
</script>
{{end}} {{ define "css"}}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/r-2.2.3/datatables.min.css"/>
<style>
  .dataTables_wrapper {
    min-height: 400px; /* this is needed to make the bootstrap-dropdown work when the table is empty */
  }

  .filter-by-status {
    padding-left: 1rem !important;
  }

  #dropdownMenuButton * {
    color: var(--font-color) !important;
  }
  #dropdownMenuButton::after {
    color: var(--font-color);
  }

  #validators_wrapper .dropdown-item:focus,
  #validators_wrapper .dropdown-item:hover {
    color: var(--font-color);
    background-color: var(--bg-color-nav);
  }

  #validators_wrapper .dropdown-menu {
    color: var(--font-color);
    background-color: var(--bg-color-secondary);
  }

  #validators_wrapper .dropdown-header {
    padding: 0.25rem 1rem;
    color: var(--body-color);
    display: flex;
  }

  #validators_wrapper .dropdown-header > span:nth-child(1) {
    width: 40%;
  }

  #validators_wrapper .dropdown-header > span:nth-child(2) {
    width: 60%;
    padding-left: 0.5rem;
  }

  #validators_wrapper .dropdown-item {
    display: flex;
    padding: 0.25rem 1rem;
    color: var(--font-color);
  }

  #validators_wrapper .dropdown-item > span:nth-child(1) {
    width: 40%;
    min-width: 80px;
  }

  #validators_wrapper .dropdown-item > span:nth-child(2) {
    width: 60%;
    min-width: 130px;
    padding-left: 0.5rem;
  }
</style>
{{end}} {{ define "content"}}
<div class="my-3">
  <div class="d-md-flex py-2 justify-content-md-between">
    <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-table"></i> Validators Overview</h1>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb font-size-1 mb-0" style="padding:0; background-color:transparent;">
        <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
        <li class="breadcrumb-item"><a href="/validators" title="Validators">Validators</a></li>
        <li class="breadcrumb-item active" aria-current="page">Overview</li>
      </ol>
    </nav>
  </div>
</div>
<div class="card">
  <div class="card-body px-0 py-2">
    <div class="table-responsive pt-2">
      <table class="table" id="validators">
        <thead>
          <tr>
            <th>Public Key</th>
            <th>Index</th>
            <th>Balance</th>
            <th>State</th>
            <th>Activation</th>
            <th>Exit</th>
            <th>Withdrawable</th>
            <th>Last Attestation</th>
            <th>Proposals</th>
          </tr>
        </thead>
        <tbody> </tbody>
      </table>
    </div>
  </div>
</div>
{{end}}
